<template>
    <div class="home">
        <Header head-title="我的电子健康卡" go-back="true"></Header>
        <section class="group">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="电子健康卡" name="first">
                    <el-collapse @change="Change">
                        <section class="group">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <section class="Select CardTitle">
                                    <div>
                                        张三丰
                                        <span class="card_title fontC">男</span>
                                        <span class="card_title fontC">本人</span>
                                        <span class="card_title fontC">4127********1234</span>
                                    </div>
                                    <button class="DqMoren">当前默认</button>
                                </section>
                            </template>
                            <section class="swiperIn" @click="CardCode()">
                                <div class="card_center">
                                    <div class="center_left">
                                        <span class="left_top">
                                            张三丰
                                        </span>
                                        <span class="left_bottom">
                                            4127*********1234
                                        </span>
                                    </div>
                                    <div class="center_right">
                                        <img class="right_top" src="../../assets/img/logo_.png" alt="">
                                        <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                                    </div>
                                </div>
                            </section>
                        </el-collapse-item>
                        </section>
                        <section class="group">
                        <el-collapse-item name="2">
                            <template slot="title">
                                <section class="Select CardTitle">
                                    <div>
                                        张三丰
                                        <span class="card_title fontC">男</span>
                                        <span class="card_title fontC">父母</span>
                                        <span class="card_title fontC">4127********1234</span>
                                    </div>
                                    <!-- <button class="DqMoren">当前默认</button> -->
                                </section>
                            </template>
                            <button class="setMoren">设为默认</button>
                            <section class="swiperIn" @click="CardCode()">
                                <div class="card_center">
                                    <div class="center_left">
                                        <span class="left_top">
                                            张三丰
                                        </span>
                                        <span class="left_bottom">
                                            4127*********1234
                                        </span>
                                    </div>
                                    <div class="center_right">
                                        <img class="right_top" src="../../assets/img/logo_.png" alt="">
                                        <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                                    </div>
                                </div>
                            </section>
                        </el-collapse-item>
                        </section>
                    </el-collapse>
                    <el-button type="primary" class="Login" @click="AddDz()">添加电子健康卡</el-button>
                </el-tab-pane>

                <el-tab-pane label="副卡" name="second">
                    <el-collapse @change="Change">
                        <section class="group">
                        <el-collapse-item name="1">
                            <template slot="title">
                                张三丰
                                <span class="card_title fontC">女</span>
                                <span class="card_title fontC">配偶</span>
                                <span class="card_title fontC">4127********1234</span>
                                <!-- <button class="DqMoren">当前默认</button> -->
                            </template>
                            <button class="setMoren">设为默认</button>
                            <section class="swiperIn" @click="CardCode()">
                                <div class="card_center">
                                    <div class="center_left">
                                        <span class="left_top">
                                            张三丰
                                        </span>
                                        <span class="left_bottom">
                                            4127*********1234
                                        </span>
                                    </div>
                                    <div class="center_right">
                                        <img class="right_top" src="../../assets/img/logo_.png" alt="">
                                        <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                                    </div>
                                </div>
                            </section>
                        </el-collapse-item>
                        </section>
                    </el-collapse>
                    <el-button type="primary" class="Login" @click="AddCard()">绑定副卡</el-button>
                </el-tab-pane>
                <el-tab-pane label="主卡" name="third">
                    <section class="group">
                        <img class="ImgNone" src="../../assets/img/voucher.png" alt="">
                        <p class="fonts">您还没有绑定主卡</p>
                    </section>
                    <el-button type="primary" class="Login" @click="AddCard()">绑定主卡</el-button>
                </el-tab-pane>
            </el-tabs>
        </section>
        <p class="fonsMiddle fontC6">还可以添加7张卡</p>
        <!-- 总卡数10张 -->
    </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
    //   console.log(tab, event)
    },
    Change () {

    },
    //  进入卡详情页面
    CardCode () {
      this.$router.push({
        path: '/CardCode'
      })
    },
    //  点击添加电子健康卡
    AddDz () {
      this.$router.push({
        path: '/Login'
      })
    },
    AddCard () {
      this.$router.push({
        path: '/BindCard'
      })
    }
  }
}
</script>

<style scoped>
.home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0.4rem;
    background: #fff;
    overflow-y: auto;
}
.swiperIn {
    margin: 0.2rem auto;
    position: relative;
}
</style>
